<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .modelDialog {

            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: none;
            background-color: rgba(0, 0, 0, .5);
            justify-content: center;
            align-items: center;
        }

        .modelDialog form {
            width: 400px;
            background: #fff;
            padding: 10px;

        }
    </style>
</head>

<body>

    <h1>C(create)U(update)R(read)D(delete)</h1>
    <!-- 创建 更新 读取 删除 -->
    <!-- 增 删 改 查 -->

    <div class="modelDialog">
        <form name="userForm">
            <p>
                <label for="username">用户名</label>
                <input type="text" name="username" id="username" value="jack">
            </p>
            <p>
                <label>性别</label>
                <input type="radio" name="gender" id="genderBoy" value="boy">
                <label for="genderBoy">男</label>
                <input type="radio" name="gender" id="genderGirl" value="girl" checked>
                <label for="genderGirl">女</label>
            </p>

            <p>
                <label>爱好</label>
                <input type="checkbox" name="hobby" id="hobbyCss" value="css">
                <label for="hobbyCss">CSS</label>
                <input type="checkbox" name="hobby" id="hobbyHtml" value="html">
                <label for="hobbyHtml">HTML</label>
                <input type="checkbox" name="hobby" id="hobbyJs" value="js">
                <label for="hobbyJs">JS</label>
            </p>

            <p>
                <label for="desc">简介</label>
                <textarea name="desc" id="desc">hello jack</textarea>
            </p>
            <p>
                <label for="city">城市</label>
                <select name="city" id="city">
                    <option value="nj">南京</option>
                    <option value="wx" selected>无锡</option>
                    <option value="sz">苏州</option>
                    <option value="cz">常州</option>
                </select>
            </p>
            <input type="button" name="submitBtn" value="提交">
            <input type="button" name="cancelBtn" value="取消">
        </form>
    </div>

    <button data-action="add">添加</button>
    <!-- data事件委托 -->
    <!-- <button data-action="del">删除</button> -->

    <table id="userGird" border="1">
        <thead>

            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>手机</th>
                <th>邮箱</th>
                <th>操作</th>

            </tr>
        </thead>

        <tbody></tbody>

    </table>


    <script>
        const id = () => String(Math.ceil(Math.random() * 1000)); //获取随机编号
        const modelDialog = document.querySelector('.modelDialog');
        const users = [{ //定义数据 并且展示
            id: id(),
            name: 'jack',
            age: 20,
            email: 'jack@qq.com',
            phone: '112221111',
            gender: 1,
        }, {
            id: id(),
            name: 'lili',
            age: 21,
            email: 'lili@qq.com',
            phone: '112221111',
            gender: 0,
        }];

        const render = function (data, el) { //封装 render是渲染  第一个data参数表示渲染什么数据 users，第二个参数el表示望哪里渲染 table

            el.tBodies[0].innerHTML = ''; //增加时的不重复之前的
            data.forEach(row => { //给表格添加内容
                const tr = document.createElement('tr'); //创建
                const tdId = document.createElement('td');
                tdId.innerHTML = row.id; //添加

                const tdName = document.createElement('td');
                tdName.innerHTML = row.name;

                const tdAge = document.createElement('td');
                tdAge.innerHTML = row.age;

                const tdEmail = document.createElement('td');
                tdEmail.innerHTML = row.email;

                const tdPhone = document.createElement('td');
                tdPhone.innerHTML = row.phone;

                const tdGender = document.createElement('td');
                tdGender.innerHTML = {
                    0: '女',
                    1: '男',
                } [row.gender];

                const tdOpt = document.createElement('td');
                const delBtn = document.createElement('button');
                delBtn.innerHTML = '删除';
                delBtn.dataset.id = row.id; //绑定数据 给delBtn加上id
                delBtn.dataset.action = 'del' //读取和设置

                const editBtn = document.createElement('button');
                editBtn.dataset.action = 'edit'; //读取和设置
                editBtn.innerHTML = '编辑';

                delBtn.dataset.id = row.id;
                tdOpt.append(delBtn, editBtn);


                tr.append(tdId, tdName, tdAge, tdGender, tdPhone, tdEmail, tdOpt); //要按顺序输入添加
                el.tBodies[0].append(tr); //tBodies 集合返回表格 <tbody> 元素的集合
            });
        }


        render(users, document.getElementById('userGird')); //调用函数 


        const methods = {
            add() { //定义add的处理方法
                //  modelDialog.style.display = 'flex'; //设置display:flex 出现弹窗效果（点 提交 按钮
                users.push({ //数据增加一行
                    id: id(),
                    name: 'wawa',
                    age: 21,
                    email: 'lili@qq.com',
                    phone: '112221111',
                    gender: 0,
                });

                render(users, document.getElementById(
                    'userGird')); //调用函数 但旧数据还在  所以在上面设置 el.tBodies[0].innerHTML=" ";
            },
            edit() { //编辑
                console.log('edit');
                // const id = this.dataset.id;
                // const index = users.findIndex(el => el.id === id); //在user里面找索引
                // users[index].name = 'jack111';
                // render(users, document.getElementById('userGrid'));

            },
            del() { //删除 拿到索引进行删除
                const id = this.dataset.id;
                const index = users.findIndex(el => el.id === id); //在user里面找索引
                users.splice(index, 1); //可直接从索引里面删
                render(users, document.getElementById('userGrid')); //重新渲染


                // console.log(this.dataset.id);
                //  console.log('del');

            }

        }
        //绑定事件
        document.addEventListener('click', function (e) {
            const action = e.target.dataset.action; //访问并保存

            //获取目标的2种方法
            /* 1 */
            //e.target.dataset.id //点击当前的目标
            //methods[action]();
            /* 2 */
            methods[action].call(e.target); //简写 //call调用方法，并且修改

            // if (action === 'add') {
            //     methods.add();
            // }

        })
    </script>

</body>

</html>